import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { MyPagination, Article } from 'components'
import { Row, Col, Button, Input, message, Upload, Image } from 'antd'
import type { UploadProps } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import './App.css'

function App() {
  const [src, setSrc] = useState<string>('')
  const [fileList, setFileList] = useState<any[]>([])
  // const props: UploadProps = {
  //   name: 'file',
  //   action: 'http://localhost:7001/api/upload',
  //   // headers: {
  //   //   authorization: 'authorization-text',
  //   // },
  //   onChange(info) {
  //     if (info.file.status !== 'uploading') {
  //       console.log(info.file, info.fileList)
  //     }
  //     if (info.file.status === 'done') {
  //       message.success(`${info.file.name} file uploaded successfully`)
  //     } else if (info.file.status === 'error') {
  //       message.error(`${info.file.name} file upload failed.`)
  //     }
  //   },
  // }
  return (
    <div className="App">
      {/* <Upload {...props}>
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload> */}
      <Row className="app-container">
        <Col span={4} className="left">
          left
          <Button onClick={() => {}}>上传文件</Button>
          {fileList.map((item) => {
            return <Image width={100} height={200} src={item.url}></Image>
          })}
          <Input
            type="file"
            multiple
            onChange={(e) => {
              // 文件描述信息
              const uploadArr = []
              if (e.target.files) {
                for (let file of e.target.files) {
                  // console.log(file, 'file')
                  // let file = e.target.files[0]
                  // console.log('file', file)
                  const formData = new FormData()
                  formData.append('file', file)
                  uploadArr.push(
                    axios.post('http://localhost:7001/api/upload', formData)
                  )
                }
                console.log('uploadArr:', uploadArr)
                Promise.allSettled(uploadArr).then((res) => {
                  console.log('res:', res)
                  let arr: any[] = []
                  res.forEach((item: any) => {
                    console.log(item.value.data.url, 'item')
                    arr.push({ url: item.value.data.url })
                  })
                  setFileList(arr)
                })
              }
            }}
          ></Input>
        </Col>
        <Col span={20} className="right">
          <MyPagination></MyPagination>
        </Col>
      </Row>
    </div>
  )
}

export default App
